<template lang="pug">
.view.cp-train-task.fix-flex-pos
  //- 查询
  el-form.tk-search(:inline="true")
    el-form-item
      el-input(v-model="crsName", placeholder="名称编号", style="width: 160px")
    el-form-item(label="课程分类 : ")
      el-select(v-model="crsType", placeholder="请选择", style="width: 120px")
        el-option(
          v-for="item in crsTypeSelectAll",
          :key="item.value",
          :label="item.name",
          :value="item.value")
    el-form-item(label="指派类型 : ")
      el-select(v-model="crsAssignType", placeholder="请选择", style="width: 120px")
        el-option(
          v-for="item in assignTypeSelectAll",
          :key="item.value",
          :label="item.name",
          :value="item.value")
    el-form-item(label="指派人 : ")
      el-select(v-model="crsAssigner", placeholder="请选择", style="width: 120px")
        el-option(
          v-for="item in assignerSelectAll",
          :key="item.value",
          :label="item.name",
          :value="item.value")
    el-form-item(label="培训时间 : ")
      el-date-picker(
        v-model="crsDateArr"
        type="daterange"
        :clearable="false"
        style="width: 256px"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期")
    el-button(type="primary", @click="resetTime", plain, style="margin-right: 16px") 重置时间
    el-button(type="primary", @click="searchTasks") 搜索
    el-button(type="primary", @click="resetSearch", plain) 重置
  .tk-table
    el-table(:data="taskList", highlight-current-row, height="100%", size="mini", v-loading="loadingTasks")
      el-table-column(align="center", type="index", label="序号", :fixed="true")
      el-table-column(align="center", show-overflow-tooltip, prop="name", label="课程名称")
      el-table-column(align="center", show-overflow-tooltip, prop="id", label="课程编码")
      el-table-column(align="center", show-overflow-tooltip, prop="type", label="课程分类")
        template(slot-scope="scope")
          span {{ scope.row.type | compare-list(crsTypeSelect) }}
      el-table-column(align="center", show-overflow-tooltip, prop="assignType", label="指派类型")
        template(slot-scope="scope")
          span {{ scope.row.type | compare-list(assignTypeSelect) }}
      el-table-column(align="center", show-overflow-tooltip, prop="assigner", label="指派人")
        template(slot-scope="scope")
          span {{ scope.row.assigner | compare-list(assignerSelect) }}
      el-table-column(align="center", show-overflow-tooltip, prop="address", label="教室地址")
      el-table-column(align="center", show-overflow-tooltip, prop="time", label="培训时间")
        template(slot-scope="scope")
          span {{ scope.row.time | date-format }}
      el-table-column(align="center", show-overflow-tooltip, prop="dutation", label="培训时长")
      el-table-column(align="center", label="操作", min-width="48px")
        template(slot-scope="scope")
          el-tooltip(content="查看")
            i.icon-act.el-icon-view(@click="viewCourse(scope.row)")
  //- 分页
  el-pagination.tk-pagination(
    layout="total, prev, pager, next, jumper",
    @current-change="changeTaskPage",
    :current-page.sync="currentPage",
    :page-size="20",
    :total="taskListTotal")
  CourseView(:visible="showCourseView", :detail="courseDetail", @close="showCourseView=false")
</template>

<script>
import { mapGetters } from 'vuex';
import TrainData from '@/data/train';
import CourseView from '@/components/train/course/CourseView';

export default {
  name: 'tratask',
  components: {
    CourseView
  },
  data() {
    return {
      // search block
      crsName: null,
      crsType: null,
      crsAssignType: null,
      crsAssigner: null,
      crsDateArr: [],
      // table block
      taskList: [],
      taskListTotal: 1,
      loadingTasks: true,
      currentPage: 1,
      // view
      showCourseView: false,
      courseDetail: {},
      //
      assignTypeSelect: [
        { name: '单次', value: '0' },
        { name: '重复', value: '1' }
      ],
      assignTypeSelectAll: [
        { name: '全部', value: null },
        { name: '单次', value: '0' },
        { name: '重复', value: '1' }
      ]
    };
  },
  computed: {
    ...mapGetters([
      'crsTypeSelect',
      'crsTypeSelectAll',
      'assignerSelect',
      'assignerSelectAll',
    ])
  },
  methods: {
    // 搜索
    resetTime () {
      this.crsDateArr = [];
    },
    resetSearch () {
      this.crsName = null;
      this.crsType = null;
      this.crsAssignType = null;
      this.crsAssigner = null;
      this.crsDateArr = [];
    },
    searchTasks () {
      this.loadingTasks = true;
      setTimeout(() => {
        this.taskList = TrainData.taskList;
        this.taskListTotal = 86;
        this.currentPage = 1;
        this.$message.success('刷新成功');
        this.loadingTasks = false;
      }, 1000);
    },
    // 表格
    viewCourse (row) {
      // TraApi.getCourseDetail({ id: row.order }).then((result) => {
      //   if (!result.status) {
      console.log(row.id);
      this.courseDetail = TrainData.courseDetail;
      this.showCourseView = true;
      //   } else {
      //     this.$message.error(result.comment);
      //   }
      // }).catch((error) => {
      //   console.log(JSON.stringify(error));
      // });
    },
    // 翻页
    changeTaskPage (currentPage) {
      console.log(currentPage);
    }
  },
  beforeRouteEnter (to, from, next) {
    next();
  },
  created () {
  },
  mounted () {
    setTimeout(() => {
      this.taskList = TrainData.taskList;
      this.taskListTotal = 121;
      this.loadingTasks = false;
    }, 1000);
  }
};
</script>

<style lang="sass">
@import "../../../styles/utils"
$SEARCHHEIGHT: 104px
$PAGEHEIGHT: 56px
.cp-train-task
  .tk-search
    height: $SEARCHHEIGHT
    overflow-x: auto
    overflow-y: hidden
    padding: 12px 0 12px 16px
    .el-form-item
      margin-right: 14px
    .el-form-item__label
      padding-right: 6px
  .tk-table
    position: absolute
    top: $SEARCHHEIGHT
    bottom: $PAGEHEIGHT
    left: 16px
    right: 16px
    overflow: auto
    table
      &::before
        display: none
      .icon-act
        font-size: 16px
        margin-left: 3px
        margin-right: 3px
  .tk-pagination
    position: absolute
    bottom: 12px
    left: 0
    right: 0
    text-align: center
</style>
